<template>
  <el-dialog
    :model-value="finishDialogVisible"
    :destroy-on-close="true"
    title="完结"
    width="80%"
    @close="
      () => {
        dateList = [];
        emits('closeDialog');
      }
    "
  >
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="send_bank" label="付款银行" align="center">
        <template #default="scope">
          {{ scope.row.send_bank }} {{ scope.row.send_branch }}
        </template>
      </el-table-column>
      <el-table-column
        prop="send_card_number"
        label="付款账号"
        align="center"
      />
      <el-table-column prop="send_card_name" label="付款人" align="center" />
      <el-table-column prop="send_amount" label="付款金额" align="center">
        <template #default="scope">
          {{ scope.row.send_amount }} {{ scope.row.send_currency }}
        </template>
      </el-table-column>
      <el-table-column prop="send_fee" label="付款手续费" align="center">
      </el-table-column>
      <el-table-column
        :formatter="formatterTime"
        prop="send_pay_time"
        label="付款时间"
        width="150"
        align="center"
      />
      <el-table-column width="20" align="center" />
      <el-table-column
        :formatter="formatterTime"
        prop="bank_real_pay_time"
        label="银行出款时间"
        width="200"
        align="center"
      >
        <template #default="scope">
          <span v-if="scope.row.bank_real_pay_time">{{
            formatDates(scope.row.bank_real_pay_time)
          }}</span>
          <div v-else class="flex justify-center items-center w-full">
            <el-date-picker
              v-model="dateList[scope.row.id]"
              :key="scope.row.id"
              type="datetime"
              placeholder="选择时间"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="退款金额" align="center">
        <template #default="scope"
          ><span>{{ scope.row.refund_amount }}</span></template
        >
      </el-table-column>
      <el-table-column
        :formatter="formatterTime"
        prop="refund_time"
        label="退款时间"
        align="center"
      />
      <el-table-column prop="description" label="备注" align="center">
        <template #default="scope">
          {{ scope.row.description || "--" }}
        </template>
      </el-table-column>
    </el-table>
    <template #footer v-if="dateList.length > 0">
      <span class="dialog-footer">
        <el-button @click="emits('finishCancel')">取消</el-button>
        <el-button
          type="primary"
          @click="submit(dialogForm)"
          :loading="btnLoading"
          >提交</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, watch } from "vue";
import { formatterTime, formatDates, timestamp } from "@/utils/utils";
import { paymentFinishApi, paymentToFinishApi } from "@/api/ExAssistant/review";

const props = defineProps({
  finishDialogVisible: {
    type: Boolean,
    default: false,
  },
  finishOrderNo: {
    type: String,
    default: "",
  },
});

const tableData = ref([]);
const dateList = ref([]);

watch(
  () => props.finishDialogVisible,
  (val) => {
    if (val) {
      getTableData(props.finishOrderNo);
    }
  }
);

const emits = defineEmits(["closeDialog", "finishCancel", "refreshList"]);
const btnLoading = ref(false);

// 提交
const submit = () => {
  let query = [];
  for (let key in dateList.value) {
    let obj = {
      record_id: key,
      bank_real_pay_time: timestamp(dateList.value[key].valueOf()),
    };
    query.push(obj);
  }
  paymentToFinishApi({ order_no: props.finishOrderNo, records: query }).then(
    (res) => {
      if ((res.code = 200)) {
        ElMessage.success("提交成功");
        dateList.value = [];
        emits("closeDialog");
        emits("refreshList");
      }
    }
  );
};

const getTableData = (order_no) => {
  paymentFinishApi({ order_no }).then((res) => {
    tableData.value = res.data?.sends || [];
  });
};
</script>
